<template>
  <div class="home">
    <!-- <video id="video" autoplay width="600" height="400"></video> -->
    <div class="wrapper">
      <div class="right">
        <div class="video">
          <div class="tree">
            <div style="color: #fff; line-height: 35px">平庄煤业元宝山煤矿</div>
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true"></el-tree>
          </div>
<!--          <div class="video-box" v-if="show">-->
<!--            <div class="box-item" v-for="(item, index) in videoList" :key="index">-->
<!--              {{ item.url }}-->
<!--              <iframe style="height: 100%; width: 100%" id="iframeVideo" :src="item.url" frameborder="0" allowfullscreen></iframe>-->
<!--            </div>-->
<!--          </div>-->
          <iframe id="iframeVideo" style="width: 200px; height: 200px;" scrolling="no"></iframe>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    // import '../assets/adapter.min.js'
    // import '../assets/webrtcstreamer.js'
    export default {
        name: 'HomeView',
        data() {
            return {
                show: true,
                currentIndex: 0,
                videoList: [
                    { index: 0, url: '' },
                    { index: 1, url: '' },
                    { index: 2, url: '' },
                    { index: 3, url: '' }
                ],
                // webRtcServer: null,
                // webRtcServer1: null,
                url: '',
                width: '100%',
                height: '1000px',
                data: [
                    {
                        label: '采煤一部监控',
                        isChildren: false,
                        children: [
                            {
                                label: '154、164分流小车限位',
                                isChildren: false,
                                children: [
                                    {
                                        label: '154-311小车限位',
                                        isChildren: true,
                                        url: '2c55f79f8ddc46fca65d5267e3740b43'
                                    },
                                    {
                                        label: '154-321小车限位',
                                        isChildren: true,
                                        url: '00d7fa90fd5e496cb613e5a2b93f37e9'
                                    },
                                    {
                                        label: '164-321小车限位',
                                        isChildren: true,
                                        url: 'd5a863c132f64bd0a08e2ebcf8c5f889'
                                    },
                                    {
                                        label: '164-311小车限位',
                                        isChildren: true,
                                        url: '57ef1cb7a02c4bddb46d646e62d07de3'
                                    }
                                ]
                            },
                            {
                                label: '311皮带',
                                isChildren: false,
                                children: [
                                    {
                                        label: '311-1',
                                        isChildren: true,
                                        url: 'ed569c066c924e2bb5148208555fce6d'
                                    },
                                    {
                                        label: '311-2',
                                        isChildren: true,
                                        url: 'd65e70df36724f7e8990544e204bc5d9'
                                    },
                                    {
                                        label: '311-3',
                                        isChildren: true,
                                        url: 'de8006b4ffb44b1ca23ff277452e46d9'
                                    },
                                    {
                                        label: '311-4',
                                        isChildren: true,
                                        url: 'b42162d25672412d9ff87e0aeeb51b1d'
                                    },
                                    {
                                        label: '311-5',
                                        isChildren: true,
                                        url: '71595c8b82a34c37962235934f42b627'
                                    },
                                    {
                                        label: '311-6',
                                        isChildren: true,
                                        url: 'aba916cb6aa94ffc822f1b3ed57df3e2'
                                    },
                                    {
                                        label: '311-7',
                                        isChildren: true,
                                        url: '8ff800fe90ec4aedbb7c3d62944b9f08'
                                    },
                                    {
                                        label: '311-8',
                                        isChildren: true,
                                        url: '225e5bbba30b48b6aa73f999ba238b67'
                                    },
                                    {
                                        label: '311-9',
                                        isChildren: true,
                                        url: 'fb24a72411bd4b98b2ab2e520ec8e636'
                                    },
                                    {
                                        label: '311-10',
                                        isChildren: true,
                                        url: 'dfdebe3f12d444d4ace7476605b9fb77'
                                    },
                                    {
                                        label: '311-11',
                                        isChildren: true,
                                        url: '8168be28ae2b4af69bdf2e1b6541bc95'
                                    },
                                    {
                                        label: '311-12',
                                        isChildren: true,
                                        url: 'd45dfc43bab24ef38037c0366da3e2d1'
                                    }
                                ]
                            },
                            {
                                label: '312皮带',
                                isChildren: false,
                                children: [
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    }
                                ]
                            },
                            {
                                label: '313皮带',
                                isChildren: false,
                                children: [
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    }
                                ]
                            },
                            {
                                label: '153皮带',
                                isChildren: false,
                                children: [
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    }
                                ]
                            },
                            {
                                label: '154皮带',
                                isChildren: false,
                                children: [
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    }
                                ]
                            },
                            {
                                label: '321皮带',
                                isChildren: false,
                                children: [
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    }
                                ]
                            },
                            {
                                label: '322皮带',
                                isChildren: false,
                                children: [
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    }
                                ]
                            },
                            {
                                label: '323皮带',
                                isChildren: false,
                                children: [
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    }
                                ]
                            },
                            {
                                label: '164皮带',
                                isChildren: false,
                                children: [
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    }
                                ]
                            },
                            {
                                label: '智能识别画面',
                                isChildren: false,
                                children: [
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    }
                                ]
                            },
                            {
                                label: '沿线立杆',
                                isChildren: false,
                                children: [
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    },
                                    {
                                        label: '采煤一部监控',
                                        isChildren: true,
                                        url: '视频路径2'
                                    }
                                ]
                            }
                        ]
                    }
                ],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        mounted() {
            // this.webRtcServer = new WebRtcStreamer(
            //   'video',
            //   'http://10.13.154.17:8000', //本机ip+端口8000
            // )
            // this.webRtcServer.connect(
            //   'rtsp://10.13.155.11:554/openUrl/MMeqLzW', //这是填自己的rtsp流
            // )
        },
        methods: {
            handleNodeClick(data) {
                console.log(data)
                if (data.isChildren) {
                    fetch('http://localhost:8888/api/v1/candidates/' + data.url)
                        .then(response => response.json())
                        .then(data => {
                            console.log(data)
                            document.getElementById('iframeVideo').src = "http://localhost:10087/vlc.html?mrl=" + data.data.url
                            // if (this.currentIndex <= this.videoList.length - 1) {
                            //     this.show = false
                            //     this.$nextTick(() => {
                            //         this.videoList[this.currentIndex].url = 'http://localhost:10087/vlc.html?mrl=' + data.data.url
                            //         this.show = true
                            //     })
                            //
                            //     // document.getElementById('iframeVideo')[this.currentIndex].src = "http://localhost:10087/vlc.html?mrl=" + data.data.url;
                            //     this.currentIndex++
                            // } else {
                            //     this.show = false
                            //     this.currentIndex = 0
                            //     this.$nextTick(() => {
                            //         this.videoList[this.currentIndex].url = 'http://localhost:10087/vlc.html?mrl=' + data.data.url
                            //         this.show = true
                            //         this.currentIndex++
                            //     })
                            //     // document.getElementById('iframeVideo')[this.currentIndex].src = "http://localhost:10087/vlc.html?mrl=" + data.data.url;
                            // }
                        })
                    // .then(data => (this.postId = data.id));
                    // .then(response => console.log(response.json()))
                    // request({
                    //     url: 'http://127.0.0.1:8082/wx/user/getRtsp',
                    //     method: 'post',
                    //     params
                    // }).then(response => {
                    //     console.log(response.data)
                    // })
                    // var rtspUrl = "rtsp://10.13.155.11:554/openUrl/WuIIRiM";
                    // var videoUrl = "http://localhost:10087/vlc.html?mrl=" + rtspUrl;
                    // if (this.currentIndex <= this.videoList.length - 1) {
                    //     this.videoList[this.currentIndex].url = videoUrl
                    //     this.currentIndex++
                    // } else {
                    //     this.currentIndex = 0
                    //     this.videoList[this.currentIndex].url = videoUrl
                    //     this.currentIndex++
                    // }
                }
            }
        },
        beforeDestroy() {
            // this.webRtcServer.disconnect()
            // this.webRtcServer = null
        }
    }
</script>
<style lang="scss" scoped>
  .wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #02041b;
    .left {
      width: 10%;
      height: 100%;
      a {
        text-decoration: none;
      }
      .nav-item {
        height: 60px;
        display: flex;
        align-items: center;
        padding-left: 20%;
        color: #fff;
        background-color: #051751;
        margin-top: 2px;
      }
    }
  }

  .right {
    width: 90%;
    height: 100%;
    .video {
      width: 100%;
      height: 100%;
      display: flex;
      .tree {
        width: 20%;
        height: 100%;
      }
      .video-box {
        width: 80%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .box-item {
          width: 49.5%;
          height: 50%;
          background-color: aliceblue;
          border: 1px solid #02041b;
        }
      }
    }
  }
  ::deep .el-tree {
    color: #fff;
    background-color: transparent;
  }
  ::deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #183056;
  }
  ::deep .el-tree-node__content:hover {
    background-color: #183056;
  }
  ::deep .is-focusable:focus {
    background-color: #183056;
  }
</style>
